Rodrigo

Hi, This would be my approach: https://codepen.io/GreenSock/pen/vYMqvNr Hopefully this helps. Happy Tweening!

Hi @mantiss, You can try checking for the window object so it works only on the browser and not during deploys or SSR (in case you have SSR in your project): if (typeof window !== "undefined") { gsap.registerPlugin(ScrollTrigger); } Although the useEffect/useLayoutEffect approach should work as well. Happy Tweening!

Hi @simran_evoco, This thread @mvaneijgen created should help you to achieve that: Happy Tweening!

Hi, Maybe these demos can help: https://codepen.io/GreenSock/pen/MWaWPmG https://codepen.io/GreenSock/pen/gOabMXv Happy Tweening!

It seems to me that the problem is here: const rotationAngle = 360 * (closestItemIndex / menuItemElements.length); When you go from 300 to 360 it goes from 300 to 0, so the dot goes all the way to 0 degrees instead of going to 360. The problem here is the logic to keep the dot going in the same direction. Right of the top of my head I can't think of something that solves this. Maybe wrap the degree values between large negative an positive values could be an option. Sorry I can't be of more assistance. Happy Tweening!

You have a typo in your script tag. It's src and you have scr in your tag: <!-- Wrong --> <script scr=" https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollToPlugin.min.js"></script> <!-- Right --> <script src=" https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollToPlugin.min.js"></script> Hopefully this helps. Happy Tweening!

Hey, is great to hear that you were able to solve this. Honestly I never used Vitest before, the few times I worked with Jest and before that with Mocha and Chai. Thanks for reporting back and sharing your solution with the community, I'm sure many users will benefit from your generosity 💚 Happy Tweening!

Hi, Great to hear that you were able to find a solution and I hope that you get good news from the agency Thanks for sharing your solution 💚 Happy Tweening!

Hi, The ideal way would be to register the plugins is to do it in the outmost layout file, as shown in this demo: https://stackblitz.com/edit/stackblitz-starters-cxedmc?file=app%2Flayout.tsx Is worth mentioning though that there is absolutely no issue if a plugin is registered more than once, so you won't run into any issues if you do that. Hopefully this helps. Happy Tweening!

Hey Sam, I'm on my phone now so no chance at looking at the site. On a quick glance at the snippet you posted, I see that in your horizontal tween you're using the default easing function which is power1.out, that will make the motion start fast and end slow. When mimicking horizontal scroll always use ease none (see the ease visualizer on our learning center). Give that a try and let us know how it goes Happy Tweening!

Hi @MDesigns and welcome to the GSAP Forums! You're looking for ScrollTrigger's refresh method: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.refresh() Something like this: $('.post-list-footer a').click(function(e) { e.preventDefault(); $('.post').show(); $(this).hide(); // After adding the new elements refresh the ScrollTrigger instances on the page ScrollTrigger.refresh(); }); That will tell ScrollTrigger to run all the calculations again, updating the start and end points accordingly. Here is a fork of your demo: https://codepen.io/GreenSock/pen/rNbEyGw Here is a demo that emulates an API callback using ScrollTrigger's batch method: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.batch() https://codepen.io/GreenSock/pen/YzOzjbL Hopefully this helps. Happy Tweening!

Hi, As far as I can see this in your demo is scaling properly. What exactly is not working, or the issue here? Sorry but maybe I'm missing something obvious here 🤷‍♂️ Maybe you could check GSAP MatchMedia, but I'm not sure if your question/issue is in that realm: https://gsap.com/docs/v3/GSAP/gsap.matchMedia() Sorry I can't be of more assistance, if can please be more specific about what should happen in your demo as you reduce the screen width. Hopefully this helps. Happy Tweening!

Hi, Sorry about the issues, but honestly I've never been to keen on unit testing, even less GSAP instances or effects of it, I just don't see the need for it, but that's just me. I fiddled around with your demo and the issue here is that the test seems to run and finish before the GSAP instance is completed, I added a dummy test assertion: expect("true").toMatch("true"); So the test will always succeed, and added this to the GSAP code: console.log('click handler'); // <- YES // Animate box gsap .to(boxRef.current, { x: 120, rotation: 360, onStart: () => { console.log('tween started', Date.now());// <- YES }, onComplete: () => { boxRef.current.setAttribute('data-animated', 'true'); console.log('complete', Date.now()); // <- NO }, }) .then(() => { console.log('THEN CALLBACK', Date.now()); // <- NO }); So I see the first two logs in the terminal running the test but not the other two. That clearly means that the GSAP instance is not being completed in the test environment. I even tried returning the GSAP instance, expecting that returning the promise could work with the test but it didn't work. The fact that the onStart callback is working tells me that the test environment is running this code, the async/await is not waiting for the GSAP instance to be completed. In fact running this on the test file: // Stimulate user interactions console.log("before", Date.now());// before 1714688301281 await user.click(screen.getByRole('button')); console.log("AFTER", Date.now());// AFTER 1714688301370 // 1714688301370 - 1714688301281 = 89 As you can see only 89 milliseconds elapsed , while the GSAP instance has a default duration of 500 MS, that confirms that the test is not really waiting for the animation to be completed. I wish I knew what the issue is here but is clearly not a GSAP related one, as far as I can see. Sorry I can't be of more assistance. Happy Tweening!

Hi, These threads can provide a good starting point: Hopefully this helps. Happy Tweening!

Hi @Danny21 and welcome to the GSAP Forums! In this cases is better to create just a single timeline to control everything. It's always a good idea to start without ScrollTrigger and focus on the animation first and then plug ScrollTrigger back into the mix. Maybe something like this: https://codepen.io/GreenSock/pen/rNbELKO Hopefully this helps. Happy Tweening!